<template>
    <div class="comment" ref="BsC">
    <el-table :data="commentData" style="width: 100%">
    <el-table-column label="用户" width="140" align="center">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <div class="userpic">
            <el-image style="width: 80px; height: 80px; border-radius: 50% 50%;" :src="scope.row.user.avatarUrl" />
            <span>{{scope.row.user.nickname}}</span>
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="评论" width="640" align="center">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>name: {{ scope.row.name }}</div>
            <div>address: {{ scope.row.address }}</div>
          </template>
          <template #reference>
            {{ scope.row.content }}
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="点赞" width="180" align="center">
      <template #default="scope"> 
            <el-icon size="20" color="red">
                <Medal />
            </el-icon>
            <span>{{ scope.row.likedCount }}</span>   
      </template>
    </el-table-column>
    <el-table-column label="时间" align="center">
        <template #default="scope">
        <div style="display: flex; align-items: center">
          <p>{{ scope.row.timeStr }}</p>
        </div>
      </template>
    </el-table-column>
  </el-table>
        
    </div>
</template>

<script setup lang="ts">
import { ref } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import {getComment} from '@/http/music';
import { onBeforeRouteUpdate, useRoute } from "vue-router";
import BScroll from '@better-scroll/core';
let BsC = ref<any>(null);
const Route = useRoute()
onMounted(()=>{
    comment();
    const BS = new BScroll(BsC.value,{
        scrollbar: true,
        scrollY:true,
        click:true,
        mouseWheel: true
    })                                             
})
onBeforeRouteUpdate( async (to,from,next)=>{
    let obj = await getComment(`${to.query.id}`);
    commentData.value = await obj.data.hotComments;
    BsC.value.refresh();
    next();
})
let commentData = ref()
//获取评论
const comment = async()=>{
    let obj = await getComment(`${Route.query.id}`);
    commentData.value = await obj.data.hotComments;
    console.log('获取到的评论信息',commentData);
}
</script>

<style lang="scss" scoped>
.comment {
    width: 80%;
    height: 584px;
    margin: 0 auto;
    overflow: hidden;
}
.userpic {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
}

</style>